<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CCRM管理平台</title>
    <link rel="stylesheet" href="../styles/dpl-min.css" />
    <link rel="stylesheet" href="../styles/bui-min.css" />
    <link rel="stylesheet" href="../styles/main.css" />
    <style type="text/css">
        .bui-stdmod-body{
            text-align: center;
        }
        .controls .valid-text{
            float: left;
        }
    </style>
</head>
<body>
<!--列表页-->
<div class="container">
    <form id="searchForm" class="form-panel">
        <ul class="panel-content">
            <li>
                <span>
                    <label>订单号：</label><input type="text" class="control-text" name="order.order_no"/>
                </span>
                <span>
                    <label>原订单号：</label><input type="text" class="control-text" name="order.original_order_no"/>
                </span>
                <span>
                    <label>物流单号：</label><input type="text" class="control-text" name="order.express_no"/>
                </span>
                <span>
                    <label>订单网名：</label><input type="text" class="control-text" name="order.user_name"/>
                </span>
                <span>
                    <label>商品编号：</label><input type="text" class="control-text" name="order.product_no"/>
                </span>
            </li>
            <li>
                <span>
                    <label>店铺名：</label><input type="text" class="control-text" name="order.shop_name"/>
                </span>
                <span>
                    <label>电话：</label><input type="text" class="control-text" name="order.phone"/>
                </span>
                <span>
                    <label>许可证id：</label><input type="text" class="control-text" name="token_id"/>
                </span>
                <span>
                    <label>许可证号码：</label><input type="text" class="control-text" name="token_code"/>
                </span>
                <span>
                    <label>订单导入时间：</label><input type="text" class="control-text" name="order.create_time"/>
                </span>
                <button type="button" id="btnSearch" class="button button-primary">搜索</button>
            </li>
        </ul>
    </form>

    <div class="search-grid-container">
        <div id="grid"></div>
    </div>
</div>

<!--表单页-->
<div id="modelFormDialogToken" style="display: none">
    <div class="control-group">
        <span>
            <label>许可证标志：</label><input class="input-normal control-text" readonly id="token_no" type="text"/>
        </span>
    </div>
    <div class="control-group">
        <label class="control-label"><h2>二维码：</h2></label>
        <div class="controls"><img src="" id="token_img">
        </div>
    </div>
</div>
<!--表单页-->
<div id="modelFormClaimOrder" style="display: none">
    <form id="claimModelForm" class="form-horizontal" method="" action="">
        <div class="control-group">
            <label class="control-label">现用户手机：</label>
            <div class="controls">
                <input class="input-normal control-text" id="oldUserPhone" name="oldUserPhone" type="text" readonly/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">认领的原始订单：</label>
            <div class="controls">
                <input class="input-normal control-text" id="claimOriginalOrder" name="claimOriginalOrder" type="text" readonly/>
            </div>
        </div>
        <div class="control-group ">
            <label class="control-label">认领户手机：</label>
            <div class="controls" >
                <input style="float: left;" class="input-normal control-text" id="userPhone" data-rules="{regexp:[/^1[3|4|5|8][0-9]\d{8}$/,'请输入正确的手机号码']}" type="text" name="userPhone" /><br>
            </div>
        </div>
        <div class="row form-actions actions-bar">
            <div class="span13 offset3 ">
                <button type="submit" class="button button-primary">保存</button>
                <button type="reset" class="button">重置</button>
            </div>
        </div>
    </form>
</div>
<!--表单页-->
<div id="modelFormShareCode" style="display: none">
    <div class="control-group">
        <span>
            <label>分享码：</label><input class="input-normal control-text" id="shareCode"  type="text" style="font-family: -webkit-body;" readonly/>
        </span>
    </div>
</div>
<script type="text/javascript" src="../scripts/jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../scripts/bui.js"></script>
<script type="text/javascript" src="../scripts/common/search.js"></script>
<script type="text/javascript">
    var URI = "../clmp/order", MODULE='order';
    var modelFormDialogToken,modelFormClaimOrder,modelFormShareCode ;
    BUI.use(['common/search', 'bui/overlay', 'bui/form','bui/grid'], function (Search, Overlay, Form,Grid) {
        var secondColumns = [
            {title: 'id', dataIndex: 'token_id', width: '10%'},
            {title: '许可证', dataIndex: 'license_token', width: '10%',renderer:function(value){return value?value:'未关联许可证'}},
            {title: '许可证数量', dataIndex: 'num', width: '10%'},
            {title: '许可证状态', dataIndex: 'status', width: '10%',renderer:function(value){return value==0?'未认领':(value==1?'已认领':'')}},
            {title: '领用客户id', dataIndex: 'user_id', width: '10%'},
            {title: '领用客户手机', dataIndex: 'mobile', width: '10%'},
            {title: '领用客户昵称', dataIndex: 'nick_name', width: '10%'},
            {title: '领用客户姓名', dataIndex: 'real_name', width: '10%'},
            {title: '操作', dataIndex: '', width: '8%', renderer: function (value, obj) {
                var editStr = "";
                if(obj.license_token){
                    editStr = '<span class="grid-command btn-license-token" onclick="showToken(\''+obj.license_token+'\');" title="查看许可证">查看许可证</span>';
                }else{
                    editStr = '<span class="grid-command btn-license-token" title="未关联许可证">未关联许可证</span>';
                }
                return editStr;
            }}
        ];
        var cascade = new Grid.Plugins.Cascade({
            renderer : function(token){
                return '<div class="inner-grid"></div>';//生成简单表格的容器
            }
        });
        //简单表格的配置信息
        var simpleGridConfig = {
            autoRender:true,
            columns:secondColumns //BUI.cloneObject(columns)//这里为了简单起见，复制了配置信息，应用中需要自己配置
        };

        var columns = [
            {title: '订单号', dataIndex: 'order_no', width: '10%'},
            {title: '原始订单号', dataIndex: 'original_order_no', width: '10%'},
            {title: '物流单号', dataIndex: 'express_no', width: '10%'},
            {title: '订单网名', dataIndex: 'user_name', width: '10%'},
            {title: '商品编号', dataIndex: 'product_no', width: '10%'},
            {title: '购买数量', dataIndex: 'count', width: '10%'},
            {title: '店铺名', dataIndex: 'shop_name', width: '10%'},
            {title: '电话', dataIndex: 'phone', width: '10%'},
            {title: '地址', dataIndex: 'address', width: '10%'},
            {title: '订单导入时间', dataIndex: 'create_time', width: '10%'},
            {title: '操作', dataIndex: '', width: '8%', renderer: function (value, obj) {
                var editStr ="", delStr="" ;
                if(obj.user_status == 0){
                    editStr = '<shiro:hasPermission name="/clmp/order/post_claimOrder:post"><span class="grid-command btn-claim" title="用户认领">用户认领</span></shiro:hasPermission>';
                    delStr = '<span class="grid-command btn-share-code" title="查看分享码">查看分享码</span>';
                }
                return editStr + delStr;
            }}

        ];
        var store = Search.createStore(URI+"/get_getTokenByOrder", {totalProperty: 'total'});
        var gridCfg = Search.createGridCfg(columns, {
            emptyDataTpl : '<div style="padding: 20px" class="centered"><img src="../img/nodata.png"><h2>好像还没有数据</h2></div>',
            plugins: [cascade]
        });

        var search = new Search({
            store: store,
            gridCfg: gridCfg
        });
        var grid = search.get('grid');
        //监听事件，删除一条记录
        grid.on('cellclick', function (ev) {
            var sender = $(ev.domTarget); //点击的Dom
            if (sender.hasClass('btn-claim')) {
                $("#oldUserPhone").val("");
                $("#claimOriginalOrder").val("");
                $("#userPhone").val("");
                claimOrder(ev.record);
            }else if(sender.hasClass('btn-share-code')){
                showShareCode(ev.record);
            }
        });

        function claimOrder(record){
            $("#oldUserPhone").val(record.user_mobile);
            $("#claimOriginalOrder").val(record.original_order_no);
            modelFormClaimOrder.show();
        }
        function showShareCode(record){
            $("#shareCode").val(record.share_code);
            modelFormShareCode.show();
        }
        cascade.on('expand',function(ev){
            var data = ev.record;
            var row = ev.row;
            var sgrid = $(row).data('sub-grid');
            if(!sgrid && data.tokens.length > 0){
                var container = $(row).find('.inner-grid');
                var gridConfig = BUI.cloneObject(simpleGridConfig);
                gridConfig.render = container;
                sgrid = new Grid.SimpleGrid(gridConfig);
                sgrid.showData(data.tokens);
                $(row).data('sub-grid',sgrid);
            }
        });
        modelFormDialogToken = new Overlay.Dialog({
            title: '许可证',
            width: 520,
            height: 480,
            mask: false,
            buttons: [],
            contentId: 'modelFormDialogToken'
        });

        modelFormClaimOrder = new Overlay.Dialog({
            title: '新用户认领订单',
            width: 520,
            height: 330,
            mask: false,
            buttons: [],
            contentId: 'modelFormClaimOrder'
        });

        modelFormShareCode = new Overlay.Dialog({
            title: '查看分享码',
            width: 400,
            height: 200,
            mask: false,
            buttons: [],
            contentId: 'modelFormShareCode'
        });
        var modelFormObject = new Form.HForm({
            srcNode: '#claimModelForm',
            submitType: 'ajax',
            callback: function (data) {
                if (data.status === 1) {
                    BUI.Message.Alert('操作成功');
                    modelFormClaimOrder.hide();
                    search.load();
                } else {
                    BUI.Message.Alert('操作失败:' + data.msg);

                }
            }
        }).render();
        modelFormObject.set('action', URI+"/post_claimOrder");
        modelFormObject.set('method', "POST");
    });

    function resetDialog() {
        $("#token_no").val("");
        $("#token_img").attr("src","");
    }
    function showToken(token){
        resetDialog();
        modelFormDialogToken.show();
        if(token){
            $("#token_no").val(token);
            $("#token_img").attr("src","http://qr.liantu.com/api.php?text=http://cheeryum.com/app?_c="+token+"&amp;w=180");
        }else{
            $("#token_no").val("未关联许可证");
        }
    }
</script>
</body>
</html>